<template>
	<view>
		<view class="">
			<plhead :height="headh"></plhead>
			<view class="top">
				<u-status-bar bgColor="#f8f8f8"></u-status-bar>
				<view class="head" :style="{height:headh}">
					<view class="head__status">
						<view class="head__status__dian">

						</view>
						<text class="head__status__text">接单中</text>
						<image src="/static/homed/xia.png" class="head__status__xia" mode=""></image>
					</view>
					<image src="/static/homed/reload.png" @click="clickrel" class="head__reload"
						:class="isreload?'xuanzhuan':''" mode=""></image>
				</view>
			</view>

			<view class="con">
				<view class="userinfo">
					<image src="/static/logo.png" class="userinfo__tx" mode="aspectFill"></image>
					<view class="">
						<view class="userinfo__name">
							181****8437
						</view>
						<view class="userinfo__time">
							<image src="/static/homed/time.png" class="userinfo__time__icon" mode=""></image> 更新时间:
							07-29 15:23
						</view>
					</view>
				</view>
				<view class="box">
					<view class="box__title">
						<image src="/static/homed/sj.png" class="box__title__icon" mode=""></image>
						<view class="box__title__text">
							数据统计
						</view>
						<image src="/static/homed/more.png" class="box__title__more" mode=""></image>
					</view>
					<view class="u-flex u-flex-y-center" style="height: 136rpx;">
						<view class="box__item">
							<view class="box__item__num">
								12
							</view>
							<view class="box__item__text">
								接单量
							</view>
						</view>
						<view class="box__item">
							<view class="box__item__num per">
								100
							</view>
							<view class="box__item__text">
								成功率
							</view>
						</view>
						<view class="box__item">
							<view class="box__item__num per">
								100
							</view>
							<view class="box__item__text">
								上门率
							</view>
						</view>
						<view class="box__item">
							<view class="box__item__num price">
								<u-parse :content="formattedPrice(price)"></u-parse>
							</view>
							<view class="box__item__text">
								上门率
							</view>
						</view>
					</view>
				</view>
				<view class="box u-flex u-flex-y-center" style="height: 195rpx;">
					<view class="box__item" v-for="(item,index) in list" :key="index">
						<image :src="'/static/homed/t'+index+'.png'" class="box__item__icon" mode=""></image>
						<view class="box__item__name">
							{{item.name}}
						</view>
					</view>
				</view>
				<u-swiper :list="list1" height="143rpx"></u-swiper>
				
			</view>
			<u-sticky bgColor="#F8F8F8" customNavHeight="103rpx" :offsetTop="$u.addUnit($u.sys().statusBarHeight,'px')">
				<scroll-view scroll-x="true" style="width: 750rpx;">
					<view class="tab u-flex-y-center">
						<view class="tab__item" v-for="(item,index) in tab" :key="index" @click="curtab=index" :class="curtab==index?'active':''">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</u-sticky>
			<view class="list">
				<view class="list__item" v-for="(item,index) in 10" :key="index">
					<view class="u-flex" style="margin-bottom: 25rpx;">
						<image src="/static/logo.png" class="list__item__pic" mode="aspectFill"></image>
						<view class="">
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="list__item__name">
									家用充电桩安装
								</view>
								<view class="list__item__status">
									已完成
								</view>
							</view>
							<view class="list__item__gg">
								规格名称: 默认
							</view>
							<view class="list__item__time">
								期望上门时间: 07月25日(周五)22:00~24:00
							</view>
							<view class="list__item__addr">
								服务地址: 山西省太原市小店区13131318
							</view>
						</view>
					</view>
					<view class="u-flex u-flex-y-center u-flex-end">
						<view class="list__item__btn1">
							联系预约人
						</view>
						<view class="list__item__btn2">
							查看评价
						</view>
					</view>
				</view>
			</view>
		</view>

		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headh: '103rpx',
				isreload: false,
				price:'101.00',
				list:[
					{name:'我的钱包',url:''},
					{name:'服务商入驻',url:''},
					{name:'师傅保证金',url:''},
					{name:'提交需求',url:''},
				],
				list1:['/static/homed/banner.png'],
				tab:[
					{name:'全部',status:''},
					{name:'待付款',status:''},
					{name:'待接单',status:''},
					{name:'已接单',status:''},
					{name:'服务中',status:''},
					{name:'已完成',status:''},
					
				],
				curtab:0
			};
		},
		methods: {
			clickrel() {
				let _this = this
				_this.isreload = false
				_this.isreload = true
				setTimeout(() => {
					_this.isreload = false
				}, 1000)
			}
		},
		computed: {
			formattedPrice() {
				return function(value){
					const [integerPart, decimalPart] = value.split(".");
					return `<span style="font-size: 24rpx;">￥</span>${integerPart}.<span style="font-size: 30rpx;">${decimalPart}</span>`;
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #f8f8f8;
		&__status {
			padding: 0 20rpx;
			height: 58rpx;
			background: #FFFFFF;
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			display: flex;
			align-items: center;

			&__dian {
				width: 15rpx;
				height: 15rpx;
				background: #0CAE61;
				border-radius: 50%;
			}

			&__xia {
				width: 19rpx;
				height: 11rpx;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #010A09;
				margin: 0 10rpx;
			}
		}

		&__reload {
			width: 60rpx;
			height: 60rpx;
			margin-left: 18rpx;
		}

		@keyframes rot_test {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.xuanzhuan {
			animation: rot_test 1s linear infinite;
		}
	}

	.con {
		padding: 0 30rpx 36rpx;
	}

	.userinfo {
		display: flex;
		align-items: center;
		padding: 33rpx 20rpx;

		&__tx {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		&__name {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #000000;
			line-height: 25rpx;
			margin-bottom: 18rpx;
		}

		&__time {
			padding: 0 10rpx;
			height: 34rpx;
			background: rgba(12, 174, 97, .08);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #0CAE61;
			line-height: 34rpx;

			&__icon {
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}
	}

	.box {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 26rpx;
		&__title {
			padding: 40rpx 22rpx 0 24rpx;
			display: flex;
			align-items: center;

			&__icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 26rpx;
				flex: 1;
			}

			&__more {
				width: 12rpx;
				height: 21rpx;
			}
		}

		&__item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;

			&__num {
				font-family: DINNextLTPro, DINNextLTPro;
				font-weight: bold;
				font-size: 38rpx;
				color: #100E0B;
				line-height: 38rpx;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #797778;
				line-height: 24rpx;
				margin-top: 23rpx;
			}

			.per {
				&::after {
					content: "%";
					font-size: 30rpx;
				}
			}

			&__icon{
				width: 92rpx;
				height: 89rpx;
				margin-bottom: 22rpx;
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #4E4E4E;
				line-height: 26rpx;
			}
		}
	}
	.tab{
		padding: 0 0 25rpx 6rpx;
		&__item{
			width: 123rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 3rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #55585A;
			line-height: 24rpx;
			margin-left: 18rpx;
			flex-shrink: 0;
		}
		.active{
			background: #EEFFEE;
			color: #0AA85B;
			font-weight: 800;
			border-color: #0AA85B;
		}
	}
	.list{
		padding: 0 30rpx 30rpx;
		&__item{
			margin-bottom: 20rpx;
			padding: 26rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			&__pic{
				width: 168rpx;
				height: 168rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 20rpx;
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #2A2C2C;
				line-height: 50rpx;
			}
			&__status{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #727272;
				line-height: 24rpx;
			}
			&__gg{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}
			&__time{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}
			&__addr{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}
			&__btn1{
				width: 174rpx;
				height: 60rpx;
				background: #fff;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				border: 2rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #585858;
				line-height: 25rpx;
				
			}
			&__btn2{
				width: 147rpx;
				height: 58rpx;
				background: #2EB16C;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 18rpx;
			}
		}
	}
</style>